<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DataGrid with Header Contextmenu -- jQUery EasyUI Demo</title>
    <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../extend/jquery.easyui.datagrid.extend.js"></script>
    <script type="text/javascript" src="../../extend/jquery.easyui.menu.extend.js"></script>
    <!--<script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>-->
    <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
    <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type="text/javascript">
        SyntaxHighlighter.config.tagName = "textarea";
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript">
        $(function(){
            $('#datagrid').datagrid({
                columns:[[
                    {field: 'ck', checkbox: true},
                    {field: 'itemid', width: 80, title: 'Item ID', sortable: true},
                    {field: 'productid', width: 100, title: 'Product ID'},
                    {field: 'listprice', width: 80, align: 'right', title: 'List Price', sortable: true},
                    {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                    {field: 'attr1', width: 250, title: 'Attribute'},
                    {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                ]],
                singleSelect: true,
                rownumbers: true,
                remoteSort: false,
                title: 'Basic DataGrid',
                url: '../datagrid/datagrid_data1.json',
                height: 250,
                width: 700,
                customAttr:{
                    headerContextMenu:{
                        isShow: true
                    }
                }
            });

        });
    </script>
</head>
<body>
    <!--<h3>Header ContextMenu 及默认菜单项演示</h3>-->
    <!--<table id="datagrid"></table>-->



    <div class="easyui-tabs" data-options="fit: true, plain: true">
        <div data-options="title: 'Demo'">
            <h3>Header ContextMenu 及默认菜单项演示</h3>
            <table id="datagrid"></table>
        </div>
        <div data-options="title: 'Code'" style="font-size: 14px;">
            <p>javascript:</p>
            <textarea class="brush: js; highlight: [19,20,21,22,23,25]">
                    $(function(){
                        $('#datagrid').datagrid({
                            columns:[[
                                {field: 'ck', checkbox: true},
                                {field: 'itemid', width: 80, title: 'Item ID', sortable: true},
                                {field: 'productid', width: 100, title: 'Product ID'},
                                {field: 'listprice', width: 80, align: 'right', title: 'List Price', sortable: true},
                                {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                                {field: 'attr1', width: 250, title: 'Attribute'},
                                {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                            ]],
                            singleSelect: true,
                            rownumbers: true,
                            remoteSort: false,
                            title: 'Basic DataGrid',
                            url: '../datagrid/datagrid_data1.json',
                            height: 250,
                            width: 700,
                            customAttr:{
                                headerContextMenu:{
                                    isShow: true
                                }
                            }
                        });
                    });
            </textarea>

            <p>html:</p>
            <textarea class="brush: html;">
                <body>
                    <h3>Header ContextMenu 及默认菜单项演示</h3>
                    <table id="datagrid"></table>
                </body>
            </textarea>
        </div>
    </div>
</body>
</html>